<script setup>
import { ref } from "vue";
import { RouterLink, useRouter } from "vue-router";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import { User, Lock, Warning } from "@element-plus/icons-vue";
import { getCodeImg } from "@/api/login.js";
import { useUserStore } from "@/stores/user";
import setting from "@/config/setting.js";
import LoginBg from "@/assets/images/login-bg.jpg";
import ZzyLogo from "@/assets/logo/zzy-logo.png";

const userStore = useUserStore();
const router = useRouter();

const title = setting.title;

const loginFormRef = ref(null);
const loginForm = ref({
  username: "",
  password: "",
  rememberMe: false,
  code: "",
  uuid: "",
});
const loginRules = ref({
  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  code: [{ required: true, trigger: "change", message: "请输入验证码" }],
});
const codeUrl = ref("");
const loading = ref(false);
// 验证码开关
const captchaEnabled = ref(false);
// 注册开关
const register = ref(false);
const redirect = ref(undefined);

function handleLogin() {
  loginFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      if (loginForm.value.rememberMe) {
        Cookies.set("username", loginForm.value.username, { expires: 30 });
        Cookies.set("password", encrypt(loginForm.value.password), {
          expires: 30,
        });
        Cookies.set("rememberMe", loginForm.value.rememberMe, {
          expires: 30,
        });
      } else {
        console.log("删除密码");
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove("rememberMe");
      }
      try {
        await userStore.login(loginForm.value);
      } catch (error) {
        loading.value = false;
        if (captchaEnabled.value) {
          getCode();
        }
      }
      router.push({ path: redirect.value || "/" });
    }
  });
}

function getCode() {
  getCodeImg().then((res) => {
    captchaEnabled.value =
      res.captchaEnabled === undefined ? true : res.captchaEnabled;
    if (captchaEnabled.value) {
      codeUrl.value = "data:image/gif;base64," + res.img;
      loginForm.value.uuid = res.uuid;
    }
  });
}

function getCookie() {
  const username = Cookies.get("username");
  const password = Cookies.get("password");
  const rememberMe = Cookies.get("rememberMe");
  loginForm.value.username =
    username === undefined ? loginForm.value.username : username;
  loginForm.value.password =
    password === undefined ? loginForm.value.password : password;
  loginForm.value.rememberMe =
    rememberMe === undefined ? loginForm.value.rememberMe : Boolean(rememberMe);
}

getCode();
getCookie();
</script>

<template>
  <div class="login">
    <div class="login-left">
      <h1 class="left-title">{{ title }}</h1>
      <el-image style="width: 100%; height: 100%" :src="LoginBg" />
    </div>
    <div class="login-right">
      <div class="right-content">
        <div class="title">
          <h1 class="hello">您好！</h1>
          <div class="des">欢迎登录{{ title }}</div>
        </div>
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              type="text"
              auto-complete="off"
              placeholder="账号"
              :prefix-icon="User"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              auto-complete="off"
              placeholder="密码"
              @keyup.enter.native="handleLogin"
              :prefix-icon="Lock"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="code" v-if="captchaEnabled">
            <el-input
              v-model="loginForm.code"
              auto-complete="off"
              placeholder="验证码"
              @keyup.enter.native="handleLogin"
              :prefix-icon="Warning"
            >
              <template #suffix>
                <div class="login-code">
                  <img :src="codeUrl" @click="getCode" class="login-code-img" />
                </div>
              </template>
            </el-input>
          </el-form-item>
          <div class="login-button-content">
            <el-button
              class="login-button"
              :loading="loading"
              size="default"
              type="primary"
              @click.native.prevent="handleLogin"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
            <div class="right-check">
              <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
            </div>
          </div>
          <el-link
            class="mt5"
            style="float: right"
            v-if="register"
            type="primary"
          >
            <RouterLink class="link-type" :to="'/register'"
              >立即注册</RouterLink
            >
          </el-link>
        </el-form>
      </div>

      <!-- 版权  -->
      <div class="el-login-footer">
        <img class="mr5" width="14px" height="14px" :src="ZzyLogo" alt="" />
        <span>智治云技术支持</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  display: flex;

  .login-left {
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 720px;
    height: 100%;

    .left-title {
      position: absolute;
      left: 80px;
      bottom: 145px;
      font-weight: 600;
      font-size: 36px;
      line-height: 60px;
      letter-spacing: 0.2em;
      color: #ffffff;
      z-index: 2;

      &::after {
        position: absolute;
        left: 0;
        bottom: -26px;
        content: "";
        width: 60px;
        height: 6px;
        background-color: #fff;
      }
    }
  }

  .login-right {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 400px;
    height: 100%;

    .right-content {
      width: 340px;
    }

    .title {
      margin-bottom: 40px;
      .hello {
        margin: 0;
        margin-bottom: 6px;
        font-size: 36px;
        line-height: 44px;
        color: #303133;
        font-weight: 400;
      }
      .des {
        font-size: 20px;
        line-height: 28px;
        color: #909399;
      }
    }

    :deep(.login-form) {
      width: 100%;

      .el-form-item {
        margin-bottom: 20px;
      }

      .el-input {
        --el-input-height: 56px;
      }
    }

    .login-button-content {
      display: flex;
      align-items: center;
      height: 52px;

      .login-button {
        width: 220px;
        height: 100%;
        margin-right: 5px;
      }

      .right-check {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        border-radius: 5px;
        background-color: #f7f8fa;
      }
    }

    .login-code {
      width: 109px;
      height: 42px;

      img {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }

    .register-link {
      font-size: 14px;
    }

    .el-login-footer {
      display: flex;
      align-items: center;
      position: absolute;
      left: 50%;
      bottom: 55px;
      transform: translateX(-50%);
      line-height: 18px;
      color: #c0c4cc;
      font-family: Arial;
      font-size: 12px;
      letter-spacing: 1px;
      z-index: 2;
    }
  }
}
</style>
